<template>
	<div class="video-list-container">
		<h3>录像文件</h3>
		<p class="divider"></p>
		<div class="video-list-wrapper">
			<div v-for="(video, index) in videoList" :key="video.sessionId">
				<VideoItem :video="video" :index="index" :total="videoList.length" :originalVideoCount="originalVideoCount" :isProcessAi="isProcessAi" />
			</div>
		</div>
	</div>
</template>

<script>
import VideoItem from './VideoItem.vue';
export default {
	components: { VideoItem },
	props: {
		videoList: {
			type: Array,
			default: () => []
		},
		isProcessAi: {
			type: Boolean,
			default: false
		},
		originalVideoCount: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {};
	},
	mounted() {},

	methods: {}
};
</script>

<style lang="less" scoped>
.video-list-container {
	color: #333333;
	margin-top: 20px;
	h3 {
		font-size: 14px;
		font-weight: bold;
		color: #333333;
		line-height: 24px;
	}

	.divider {
		width: 100%;
		height: 1px;
		background: #dedede;
		margin: 10px 0 20px 0;
	}
	.video-list-wrapper {
		display: flex;
		overflow-x: auto;
		width: 100%;
		// flex-direction: row-reverse;
		// justify-content: revert;
		// justify-items: flex-end;
	}
}
</style>
